<%--
  User: icanci
  User: ypf
  Date: 2020/9/28 8:54
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ladybird - 全球票务总代理</title>
        <jsp:include page="top-link.jsp"></jsp:include>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/index.css"/>
    </head>
    <body>
        <%--        头部导航栏--%>
        <%@include file="top-nav.jsp" %>
        <!--轮播图开始-->
        <div style="margin-top: 10px" class="layui-container">
            <div class="layui-row">
                <div class="layui-carousel" id="test1">
                    <div carousel-item>
                        <c:forEach items="${jsonData.data[2]}" var="u">
                            <div><a href="${u.carouselImgLink}"><img
                                    src="${u.carouselImgUrl}"
                                    alt=""></a>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
            <!--轮播图结束-->


            <!--演唱会开始-->
            <div style="margin-top: 20px;border: #747474 1px solid;box-sizing: border-box;margin-top: 50px;height: 500px"
                 class="layui-container">
                <div class="layui-row">
                    <div style="display: inline-block;padding-top:20px;padding-bottom: 30px">
                        <h2>演唱会</h2>
                    </div>
                    <div class="a" style="display: inline-block;padding-top:20px;padding-bottom: 30px;margin-left: 89%">
                        <a
                                href="${pageContext.request.contextPath}/api/v1/pub/user/json/class">查看更多</a></div>
                </div>

                <div class="layui-row">
                    <!--       大图      -->
                    <div class="layui-col-md3" style="padding-bottom: 40px;position: relative">
                        <a href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${jsonData.data[0].ticketDetailsId}"><img
                                src="${jsonData.data[0].ticketDetailsTicketImgUrl}"
                                alt="" style="width: 238px;height: 320px;"></a>
                        <div class="b"
                             style="width: 238px;height: 100px;opacity: 80%; color: #000000; background-color: #484848;position: absolute;margin-top: -100px">
                            <a style="font-size: 20px; color: #ffffff"
                               href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${jsonData.data[0].ticketDetailsId}">&nbsp;&nbsp;${jsonData.data[0].ticketDetailsInfo}<br>
                            </a>
                            <span style="font-size:17px;display: inline-block;margin-top: 40px;margin-left: 10px">
							<a class="c" style="color: #ffffff;"
                               href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${jsonData.data[0].ticketDetailsId}">￥${jsonData.data[0].ticketPricePrice}起</a>
						</span>
                        </div>
                    </div>
                    <!-- 小图 -->
                    <div class="layui-col-md9">
                        <c:forEach items="${jsonData.data[1]}" var="u" varStatus="status">
                            <!-- 小图1 -->
                            <c:if test="${status.index<3}">
                                <div class="layui-col-md2">
                                    <a href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}"><img
                                            src="${u.ticketDetailsTicketImgUrl}"
                                            alt="" style="width: 110px;height: 150px;"></a>
                                </div>
                                <div class="layui-col-md2"
                                     style="margin-left: -10px;margin-right: 10px; margin-top: 15px;height: 180px">
                                    <h3><a style="color: black"
                                           href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">${u.ticketDetailsInfo}</a>
                                    </h3>
                                    <span style="display: block;margin-top: 10px;font-size: 12px;"><a
                                            href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">${u.ticketAddressVenue}</a></span>
                                    <span style="display: block;margin-top: 10px;font-size: 12px;"><a
                                            href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">
                                    <fmt:formatDate value="${u.ticketStartTime}" var="validDate1"
                                                    pattern="yyyy.MM.dd"/> ${validDate1} -
                                                            <fmt:formatDate value="${u.ticketEndTime}" var="validDate"
                                                                            pattern="MM.dd"/> ${validDate}
                                </a></span>
                                    <span style="display: block;margin-top: 29px;font-size: 14px;"><a
                                            style="color: #1e9fff"
                                            href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">¥${u.ticketPricePrice}起</a></span>
                                </div>
                            </c:if>
                            <c:if test="${status.index>=3}">
                                <div class="layui-col-md2" style="margin-top: 20px;">
                                    <a href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}"><img
                                            src="${u.ticketDetailsTicketImgUrl}"
                                            alt="" style="width: 110px;height: 150px;"></a>
                                </div>
                                <div class="layui-col-md2"
                                     style="margin-left: -10px;margin-right: 10px; margin-top: 20px">
                                    <h3><a style="color: black"
                                           href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">${u.ticketDetailsInfo}</a>
                                    </h3>
                                    <span style="display: block;margin-top: 10px;font-size: 12px;"><a
                                            href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">${u.ticketAddressVenue}</a></span>
                                    <span style="display: block;margin-top: 10px;font-size: 12px;"><a
                                            href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">
                                     <fmt:formatDate value="${u.ticketStartTime}" var="validDate1"
                                                     pattern="yyyy.MM.dd"/> ${validDate1} -
                                                            <fmt:formatDate value="${u.ticketEndTime}" var="validDate"
                                                                            pattern="MM.dd"/> ${validDate}
                                </a></span>
                                    <span style="display: block;margin-top: 29px;font-size: 14px;"><a
                                            style="color: #1e9fff"
                                            href="${pageContext.request.contextPath}/api/v1/pub/user/json/userproduce?ticketId=${u.ticketDetailsId}">¥${u.ticketPricePrice}起</a></span>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </div>
            <!--演唱会结束-->
            <!--演唱会开始-->
            <div style="margin-top: 20px;border: #747474 1px solid;box-sizing: border-box;margin-top: 50px"
                 class="layui-container">
                <div class="layui-row">
                    <div style="display: inline-block;padding-top:20px;padding-bottom: 30px">
                        <h2>演唱会</h2>
                    </div>
                    <div class="a" style="display: inline-block;padding-top:20px;padding-bottom: 30px;margin-left: 89%">
                        <a
                                href="${pageContext.request.contextPath}/api/v1/pub/user/json/class">查看更多</a></div>
                </div>

                <div class="layui-row">
                    <!--       大图      -->

                    <div class="layui-col-md3" style="padding-bottom: 40px;position: relative">
                        <a href="detalis.jsp"><img
                                src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle1.jpg"
                                alt=""></a>
                        <div class="b"
                             style="width: 238px;height: 100px;opacity: 80%; color: #000000; background-color: #484848;position: absolute;margin-top: -100px">
                            <a style="font-size: 20px; color: #ffffff" href="detalis.jsp">&nbsp;&nbsp;国潮音乐嘉年华 <br> </a>
                            <span style="font-size:17px;display: inline-block;margin-top: 40px;margin-left: 10px">
							<a class="c" style="color: #ffffff;" href="detalis.jsp">￥550起</a>
						</span>
                        </div>
                    </div>

                    <div class="layui-col-md9">
                        <!--    小图1         -->
                        <div class="layui-col-md2">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div style="margin-left: -10px;margin-right: 10px" class="layui-col-md2">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图2         -->
                        <div class="layui-col-md2">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>

                        </div>
                        <div style="margin-left: -10px;margin-right: 10px" class="layui-col-md2">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图3         -->
                        <div class="layui-col-md2">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div style="margin-left: -10px;margin-right: 10px" class="layui-col-md2">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图4        -->
                        <div class="layui-col-md2" style="margin-top: 20px;">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div class="layui-col-md2" style="margin-left: -10px;margin-right: 10px; margin-top: 20px">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图5         -->
                        <div class="layui-col-md2" style="margin-top: 20px">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div class="layui-col-md2" style="margin-left: -10px;margin-right: 10px; margin-top: 20px">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图6         -->
                        <div class="layui-col-md2" style="margin-top: 20px">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div class="layui-col-md2" style="margin-left: -10px;margin-right: 10px; margin-top: 20px">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--演唱会结束-->
            <!--演唱会开始-->
            <div style="margin-top: 20px;border: #747474 1px solid;box-sizing: border-box;margin-top: 50px"
                 class="layui-container">
                <div class="layui-row">
                    <div style="display: inline-block;padding-top:20px;padding-bottom: 30px">
                        <h2>演唱会</h2>
                    </div>
                    <div class="a" style="display: inline-block;padding-top:20px;padding-bottom: 30px;margin-left: 89%">
                        <a
                                href="${pageContext.request.contextPath}/api/v1/pub/user/json/class">查看更多</a></div>
                </div>

                <div class="layui-row">
                    <!--       大图      -->

                    <div class="layui-col-md3" style="padding-bottom: 40px;position: relative">
                        <a href="detalis.jsp"><img
                                src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle1.jpg"
                                alt=""></a>
                        <div class="b"
                             style="width: 238px;height: 100px;opacity: 80%; color: #000000; background-color: #484848;position: absolute;margin-top: -100px">
                            <a style="font-size: 20px; color: #ffffff" href="detalis.jsp">&nbsp;&nbsp;国潮音乐嘉年华 <br> </a>
                            <span style="font-size:17px;display: inline-block;margin-top: 40px;margin-left: 10px">
							<a class="c" style="color: #ffffff;" href="detalis.jsp">￥550起</a>
						</span>
                        </div>
                    </div>

                    <div class="layui-col-md9">
                        <!--    小图1         -->
                        <div class="layui-col-md2">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div style="margin-left: -10px;margin-right: 10px" class="layui-col-md2">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图2         -->
                        <div class="layui-col-md2">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>

                        </div>
                        <div style="margin-left: -10px;margin-right: 10px" class="layui-col-md2">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图3         -->
                        <div class="layui-col-md2">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div style="margin-left: -10px;margin-right: 10px" class="layui-col-md2">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图4        -->
                        <div class="layui-col-md2" style="margin-top: 20px;">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div class="layui-col-md2" style="margin-left: -10px;margin-right: 10px; margin-top: 20px">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图5         -->
                        <div class="layui-col-md2" style="margin-top: 20px">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div class="layui-col-md2" style="margin-left: -10px;margin-right: 10px; margin-top: 20px">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                        <!--    小图6         -->
                        <div class="layui-col-md2" style="margin-top: 20px">
                            <a href="detalis.jsp"><img
                                    src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/concle2.png"
                                    alt=""></a>
                        </div>
                        <div class="layui-col-md2" style="margin-left: -10px;margin-right: 10px; margin-top: 20px">
                            <h3><a style="color: black" href="detalis.jsp">2020淄博麦田音乐节</a></h3>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">淄博市孝妇河湿地公园阳光沙滩</a></span>
                            <span style="display: block;margin-top: 10px;font-size: 12px;"><a href="detalis.jsp">2020.09.19-09.20</a></span>
                            <span style="display: block;margin-top: 29px;font-size: 14px;"><a style="color: #1e9fff"
                                                                                              href="detalis.jsp">¥280起</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <!--演唱会结束-->
        </div>
        <!-- 尾部导航 -->
        <%@include file="foot-nav.jsp" %>
        <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/layui.js"></script>
        <script type="text/javascript">
            layui.use(['element'], function () {

            })

            layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    layedit = layui.layedit,
                    laydate = layui.laydate;

                //日期
                laydate.render({
                    elem: '#date'
                });
                laydate.render({
                    elem: '#date1'
                });

                //创建一个编辑器
                var editIndex = layedit.build('LAY_demo_editor');

                //自定义验证规则
                form.verify({
                    title: function (value) {
                        if (value.length < 5) {
                            return '标题至少得5个字符';
                        }
                    },
                    pass: [
                        /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
                    ],
                    code: [
                        /^[\S]{6}$/, '验证码必须6位，且不能出现空格'
                    ],
                    content: function (value) {
                        layedit.sync(editIndex);
                    }
                });
                //监听提交
                form.on('submit(demo1)', function (data) {
                    layer.alert(JSON.stringify(data.field), {
                        title: '最终的提交信息'
                    })
                    return false;
                });
                //表单取值
                layui.$('#LAY-component-form-getval').on('click', function () {
                    var data = form.val('example');
                    alert(JSON.stringify(data));
                });

            });
        </script>
        <script>
            layui.use('carousel', function () {
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#test1',
                    width: '100%' //设置容器宽度
                    ,
                    arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            });
        </script>
    </body>
</html>

